<template>
  <el-dialog :model-value="modelValue" title="修改个人生源所在地" width="600" @update:modelValue="updateModelValue">
    <el-form ref="formRef" :model="form" label-width="auto" style="max-width: 600px;width: 500px;" :rules="rules">
      <el-form-item label="生源所在地" prop="studentSource">
        <el-cascader v-model="form.studentSource" :props="sourceOption" filterable style="width: 100%;"/>
      </el-form-item>
      <el-row>
        <el-button type="primary" :loading="loading" @click="save" style="margin-left: auto;margin-right: auto;">
          保存
        </el-button>
      </el-row>

    </el-form>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, watch} from 'vue';
import {EleMessage} from "ele-admin-plus";
import {submitSource} from "@/api/student";
import {selectByPlaceLevel} from '@/api/system/place'


const emit = defineEmits(['done', 'update:modelValue']);


const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
});

const dialogShow = ref(false);


/** 表单实例 */
const formRef = ref(null);

/** 表单 */
const form = ref({
  studentSource: null,
});

/** 表单验证规则 */
const rules = reactive({
  studentSource: [
    {required: true, message: '请选择你的生源地', trigger: 'blur'},
  ],
});


/** 提交状态 */
const loading = ref(false);

/** 保存编辑 */
const save = () => {
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      EleMessage.error('请选择你的生源地！')
      //错误提示
      return;
    }
    loading.value = true;
    let place = form.value.studentSource.join(',');
    submitSource(place).then(response => {
      //提交成功
      //关闭当前对对话框
      updateModelValue(false);
      emit("done", form.value.studentSource.join(''));
    });
  });

};

/** 更新modelValue */
const updateModelValue = (value) => {
  emit('update:modelValue', value);
};


const sourceOption = ref({
  lazy: true,
  lazyLoad(node, resolve) {
    console.log(node);
    let params = {};
    const {level} = node;
    let nodes = [];
    switch (level) {
      case 0:
        params = {
          name: node.value,
          level: node.level,
        };
        selectByPlaceLevel(params).then(response => {
          console.log(response.data);
          if (response.data) {
            nodes = response.data.map(item => ({
              value: item.value,
              label: item.label,
              leaf: item.leaf
            }));
          }
          resolve(nodes);
        });
        break;
      case 1:
        params = {
          name: node.value,
          level: node.level,
        };
        selectByPlaceLevel(params).then(response => {
          if (response.data) {
            nodes = response.data.map(item => ({
              value: item.value,
              label: item.label,
              leaf: item.leaf
            }));
          }
          resolve(nodes);
        });
        break;
      case 2:
        params = {
          name: node.pathValues.join(','),
          level: node.level,
        };
        selectByPlaceLevel(params).then(response => {
          console.log(response.data);
          if (response.data) {
            nodes = response.data.map(item => ({
              value: item.value,
              label: item.label,
              leaf: item.leaf
            }));
          }
          resolve(nodes);
        });
        break;
    }
  }
});


</script>

